<!--
 * @Description: 
 * @Author: songlin
 * @Date: 2020-12-21 20:15:14
 * @LastEditTime: 2021-01-15 18:06:18
 * @LastEditors: songlin
-->
<template>
  <div class="arrow-page" ref="arrowPage" v-if="isShowPage" v-loading="processListLoading">
    <span class="arrow-panel">
      <el-button
        class="arrow-panel-btn"
        plain
        :icon="panelIcon"
        circle
        @click="handleTogglePanel"
      ></el-button>
    </span>
    <div class="arrow-container" ref="arrowContainer">
      <div class="arrow-box" ref="arrowBox">
        <div
          ref="arrowItem"
          v-for="(item, idx) in processList"
          :class="classObject(item, idx)"
          :key="idx"
          :data-id="item.phaseId"
          @click="(e) => handleProcessClick(e, item)"
        >
          <el-tooltip
            effect="dark"
            :content="item.phaseName"
            placement="bottom"
            :enterable="false"
          >
            <div class="arrow-item-title">
              {{ item.phaseName }}
            </div>
          </el-tooltip>
          <span class="arrow-complete">
            <el-button
              type="text"
              icon="el-icon-circle-check"
              :title="$t('common.process.visual.completePhase')"
              size="medium"
              @click="(e) => handleComplete(item, e)"
            ></el-button>
          </span>
          <span class="arrow-forward">
            <el-button
              type="text"
              icon="el-icon-finished"
              :title="$t('common.process.visual.forwardPhase')"
              size="medium"
              @click="(e) => handleForward(item, e)"
            ></el-button>
          </span>
          <span class="arrow-change">
            <el-button
              type="text"
              icon="el-icon-edit"
              :title="$t('common.process.visual.editEndNodeState')"
              size="medium"
              @click="(e) => handleChangeEnd(e)"
            ></el-button>
          </span>
        </div>
        <div
          ref="arrowItem"
          class="arrow-item none"
          @click="(e) => handleProcessClick(e)"
          v-if="!endPhase"
        >
          <el-tooltip
            effect="dark"
            :content="endNode"
            placement="bottom"
            :enterable="false"
          >
            <div class="arrow-item-title">{{ endNode }}</div>
          </el-tooltip>
          <span class="arrow-forward">
            <el-button
              type="text"
              icon="el-icon-finished"
              :title="$t('common.process.visual.forwardPhase')"
              size="medium"
              @click="(e) => handleEndForward()"
            ></el-button>
          </span>
        </div>
      </div>
      <div class="arrow-form">
        <div class="arrow-task" ref="arrowTaskBox">
          <div class="arrow-task-top">
            <el-button
              type="text"
              :icon="taskIcon"
              size="medium"
              @click="handleToggleTask"
            ></el-button
            >{{$t('common.process.visual.phaseTask')}}({{ doneTask }}/{{ totalTask }})
          </div>
          <div class="arrow-task-content" ref="arrowTask">
            <el-row :gutter="20">
              <div
                class="arrow-task-item"
                v-for="(item, idx) in phaseTaskList"
                :key="idx"
              >
                <el-col :span="12" :offset="0">
                  <el-checkbox
                    v-model="item.checked"
                    :true-label="activedValue"
                    :false-label="inactivedValue"
                    :disabled="endPhase? true: false"
                    @change="(val) => handleTaskChange(val, item)"
                    ><span style="color: red" v-if="item.required == 1">*</span
                    ><span v-else>&nbsp;&nbsp;</span
                    >{{ item.taskName }}</el-checkbox
                  >
                </el-col>
              </div>
            </el-row>
          </div>
        </div>
        <div class="arrow-info" ref="arrowInfoBox">
          <div class="arrow-info-top">
            <el-button
              type="text"
              :icon="infoIcon"
              size="medium"
              @click="handleToggleInfo"
            ></el-button
            >{{$t('common.process.visual.keyInfo')}}
          </div>
          <div class="arrow-info-content" ref="arrowInfo">
            <el-row :gutter="20">
              <el-form ref="infoForm" :model="infoForm" label-width="100px">
                <el-col :span="12" :offset="0" v-for="(item, index) in infoForm.info" :key="item.fieldId">
                  <el-form-item
                    :label="item.fieldName"
                    :prop="'info.' + index + '.fieldValue'"
                    :rules="{
                      required: item.required == 1 ? true : false,
                      message: item.fieldName + $t('common.process.visual.cannotEmpty'),
                      trigger: 'blur',
                    }"
                  >
                      <el-input
                        v-model="item.fieldValue"
                        @change="handleChangeInfo(item)"
                      ></el-input>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      :title="$t('common.process.visual.finishProcess')"
      :visible.sync="dialogVisibleEnd"
      width="300px"
      :append-to-body="true"
    >
      <div>
        <avue-form
          class="endNodeForm"
          :option="endNodeFormOpts"
          v-model="endNodeForm"
        ></avue-form>
      </div>
      <div slot="footer">
        <el-tooltip
          :enterable="false"
          :content="$t('common.cancel')"
          placement="top"
        >
          <el-button
            @click="dialogVisibleEnd = false"
            icon="el-icon-close"
          ></el-button>
        </el-tooltip>
        <el-tooltip
          :enterable="false"
          :content="$t('common.save')"
          placement="top"
        >
          <el-button
            type="primary"
            icon="el-icon-check"
            @click="handlePhaseSaveEnd"
          ></el-button>
        </el-tooltip>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProcessByObjectId,
  getProcessPhaseTask,
  getProcessPhaseInfo,
  enableProcessPhaseTask,
  disableProcessPhaseTask,
  saveProcessPhaseInfo,
  getNextProcessPhase,
  saveProcessPhaseState,
} from "../../api/event/trigger";
import { endNodeFormOption } from "./form.js";
import { deepClone } from "../../util/util";
import { mapGetters } from 'vuex';
export default {
  props: {
    tableName: {
      type: String,
      required: true,
      remark: '当前单据业务实体对应的tableName',
      values: ''
    },
    objectId: {
      type: [Number, String],
      required: true,
      remark: '当前单据id',
      values: ''
    },
    busiTypeId: {
      type: [Number, String],
      default: '',
      remark: '当前单据业务类型id',
      values: ''
    },
    options: {
      type: Object,
      default: () => {
        return {
          isExpand: true
        }
      },
      remark: '组件配置参数:{isExpand: true}'
    },
  },
  data() {
    return {
      activedValue: 1,
      inactivedValue: 0,
      process: null,
      processList: [],
      processListLoading: false,
      endNode: this.$t('common.end'),
      test: false,
      taskIcon: "el-icon-arrow-up",
      infoIcon: "el-icon-arrow-up",
      panelIcon: 'el-icon-arrow-up',
      processId: "",
      currentPhase: "",
      phaseTaskList: [],
      totalTask: 0,
      doneTask: 0,
      infoForm: {
        info: [],
      },
      currentPhaseOrigin: "",
      currentPhaseOriginIndex: '',
      currentPhaseNext: [],
      dialogVisibleEnd: false,
      endPhase: "",
      endPhaseNodes: [],
      endNodeFormOpts: endNodeFormOption(this),
      endNodeForm: {
        endPhaseId: "",
      },
      phaseTaskListOrigin: null,
      phaseInfoOrigin: null,
      isShowPage: false,
    };
  },
  computed: mapGetters(['typeId','currentModule']),
  created() {
  },
  mounted() {
    this.initComponent();
  },
  methods: {
    initComponent() {
      if (!this.busiTypeId && !this.typeId) {
        let iInterval = setInterval(() => {
          if (this.typeId) {
            this.isShowPage = true;
            this.getProcessForBusiness();
            clearInterval(iInterval);
          }
        }, 1000);
      } else {
        this.isShowPage = true;
        this.getProcessForBusiness();
        
      }
    },
    classObject(item, idx) {
      let sHtml = "arrow-item none";

      if (this.endPhase) {
        if(this.endPhase.phaseId == item.phaseId){
            sHtml = "arrow-item done select";
            if(this.currentPhaseNext.length > 0){
              sHtml += ' canChangeEnd';
            }
        } else {
          sHtml = "arrow-item done";
        }
      } else {
        if (this.currentPhaseOrigin) {
          if (this.currentPhaseOrigin.state == 0) {
            //未完成
            if (idx == this.currentPhaseOriginIndex) {
              sHtml = "arrow-item current select";
            } else if (idx < this.currentPhaseOriginIndex) {
              sHtml = "arrow-item actived";
            } else {
              sHtml = "arrow-item none";
            }
          } else if (this.currentPhaseOrigin.state == 1) {
            //已完成
            if (idx == this.currentPhaseOriginIndex) {
              sHtml = "arrow-item current";
            } else {
              sHtml = "arrow-item actived";
            }
          }
        } else {
          if (item.state == 0) {
            //未完成
            if (idx == 0) {
              sHtml = "arrow-item current select";
            } else {
              sHtml = "arrow-item none";
            }
          } else if (item.state == 1) {
            //已完成
            if (idx == 0) {
              sHtml = "arrow-item current";
            } else {
              sHtml = "arrow-item actived";
            }
          }
        }
      }

      return sHtml;
    },
    getProcessForBusiness() {
      if(!this.busiTypeId && !this.typeId){
        this.$message({
          type: 'error',
          message: 'busiTypeId ' + this.$t('common.process.visual.cannotEmpty')
        })
        return;
      }
      let oReq = {
        tableName: this.tableName,
        objectId: this.objectId,
        busiTypeId: this.busiTypeId || this.typeId,
      };
      this.processListLoading = true;
      let that = this;
      getProcessByObjectId(oReq)
        .then((res) => {
          if (res.data.meta.success) {
            let oResult = res.data.data;
            this.process = oResult;
            this.processList = oResult && oResult.sysVfPhaseStateObjectList;

            if (!this.process || this.processList.length == 0) {
              this.$refs.arrowPage.style.display = "none";
              console.log(this.$t('common.process.visual.noProcessPleaseContactAdm')); 
              return;
            }
            //匹配未进行的阶段
            let oMatched = null;
            for (let i = 0; i < this.processList.length; i++) {
              let element = this.processList[i];
              if (element.state == 0) {
                oMatched = element;
                this.currentPhaseOriginIndex = i;
                break;
              }
            }
            if (oMatched) {
              this.currentPhase = oMatched;
            } else {
              this.currentPhase = this.processList[0];//默认第一个数据为初始阶段
            }

            this.endPhase =
              oResult &&
              oResult.sysVfPhaseStateObjectList.find((raw) => {
                return raw.phaseType > 1 && raw.state == 1;
              });
            if (this.endPhase) {
              this.endNode = this.endPhase.phaseName;
              this.currentPhase = deepClone(this.endPhase);
            } else {
              this.endNode = this.$t('common.end');
            }
            //存储原始选中的阶段
            this.currentPhaseOrigin = deepClone(this.currentPhase);
          }
          this.expandPanel(this.options.isExpand);
          this.processListLoading = false;
        })
        .then(() => {
          this.endNodeForm.endPhaseId = '';
          if (this.currentPhase) {
            this.getProcessPhaseTask();
            this.getProcessPhaseInfo();

            setTimeout(() => {
              that.phaseTaskListOrigin = deepClone(that.phaseTaskList);
              that.phaseInfoOrigin = {
                info: deepClone(that.infoForm.info),
              };
            }, 1000);
          }
        })
        .then(() => {
          if (this.currentPhase) {
            this.getNextProcessPhase();
          }
        });
    },
    handleProcessClick(e, data) {
      this.expandPanel();
      let that = this;
      let aDomList = document.getElementsByClassName("arrow-item");
      for (let i = 0; i < aDomList.length; i++) {
        const item = aDomList[i];
        if (item.classList.contains("select")) {
          item.classList.remove("select");
          item.classList.remove("canForward");
        }
      }
      e.target.parentNode.classList.add("select");
      if (data) {
        this.currentPhase = data;
        this.getProcessPhaseTask();
        this.getProcessPhaseInfo();

        let sTargetPhase = data.phaseId;
        if (sTargetPhase || sTargetPhase != this.currentPhaseOrigin.phaseId) {
          let oMatchedFromNextPhaseList = this.currentPhaseNext.find((raw) => {
            return raw.phaseId == sTargetPhase;
          });

          if (oMatchedFromNextPhaseList) {
            e.target.parentNode.classList.add("canForward");
          }

          if(this.endPhase && sTargetPhase == this.endPhase.phaseId){
            e.target.parentNode.classList.add("canChangeEnd");
          }
        }
      } else {
        let aMatchedFromEndPhaseList = this.currentPhaseNext.filter((raw) => {
          return raw.phaseType > 1;
        });

        if (aMatchedFromEndPhaseList.length > 0) {
          e.target.parentNode.classList.add("canForward");
        }
      }
    },
    handleForward(row, e) {
      let bCheckedResult = this.checkedBeforeForward(
        this.currentPhaseOrigin,
        this
      );
      if (!bCheckedResult) {
        return false;
      }
      let sTargetPhase = row.phaseId;
      if (sTargetPhase || sTargetPhase != this.currentPhaseOrigin.phaseId) {
        let oMatchedFromNextPhaseList = this.currentPhaseNext.find((raw) => {
          return raw.phaseId == sTargetPhase;
        });
        if (oMatchedFromNextPhaseList) {
          let oParams = {
            tableName: this.tableName,
            objectId: this.objectId,
            vfId: this.currentPhase.vfId,
            startPhaseId: this.currentPhaseOrigin.phaseId,
            endPhaseId: sTargetPhase,
          };
          this.processListLoading = true;
          saveProcessPhaseState(this.currentModule.routePrefix, oParams).then((res) => {
            this.$message({
              type: res.data.meta.success ? "success" : "error",
              message: res.data.meta.message,
            });
            if (res.data.meta.success) {
              this.getProcessForBusiness();
            }
            this.processListLoading = false;
          });
        }
      }
    },
    handleEndForward() {
      let bCheckedResult = this.checkedBeforeForward(
        this.currentPhaseOrigin,
        this
      );
      if (!bCheckedResult) {
        return false;
      }
      let aMatchedFromNextPhaseList = this.currentPhaseNext.filter((raw) => {
        return raw.phaseType > 1;
      });

      if (aMatchedFromNextPhaseList.length > 0) {
        this.endNodeFormOpts.column[0].dicData = aMatchedFromNextPhaseList;
         this.dialogVisibleEnd = true;
      }

    },
    handleChangeEnd(e) {
      e.stopPropagation();
      let bCheckedResult = this.checkedBeforeForward(
        this.currentPhaseOrigin,
        this
      );
      if (!bCheckedResult) {
        return false;
      }

      if (this.currentPhaseNext.length > 0) {
        this.endNodeFormOpts.column[0].dicData = deepClone(this.currentPhaseNext);
         this.dialogVisibleEnd = true;
      }

    },
    checkedBeforeForward(row, that) {
      let bFlag = true;
      let aReuiredAndUncheckedPhase = [];
      let aReuiredAndUnchecked = this.phaseTaskListOrigin.filter((item) => {
        if (item.required == 1 && item.checked != 1) {
          aReuiredAndUncheckedPhase.push(item.taskName);
          return item;
        }
      });
      if (aReuiredAndUnchecked.length > 0) {
        bFlag = false;
        that.$message({
          type: "error",
          message:
            row.phaseName +
            that.$t('common.process.visual.existUnfinishedTaskInPhase') +
            aReuiredAndUncheckedPhase.join(","),
        });
      } else {
        let aReuiredAndValueField = [];
        let aReuiredAndValue = this.phaseInfoOrigin.info.filter((item) => {
          if (item.required == 1 && !item.fieldValue) {
            aReuiredAndValueField.push(item.fieldName);
            return item;
          }
        });
        if (aReuiredAndValue.length > 0) {
          bFlag = false;
          that.$message({
            type: "error",
            message:
              row.phaseName +
              that.$t('common.process.visual.existUnfinishedInfoInPhase') + ": " +
              aReuiredAndValueField.join(","),
          });
        } else {
          bFlag = true;
        }
      }

      return bFlag;
    },
    checkedBeforeHandle(data, that) {
      let iFlag = false;
      let aTaskName = [];
      let aReuiredAndUnchecked = this.phaseTaskList.filter((row) => {
        if (data.required == 1 && row.checked != 1) {
          aTaskName.push(data.taskName);
          return data;
        }
      });
      if (aReuiredAndUnchecked.length > 0) {
        iFlag = false;
        that.$message({
          type: "error",
          message:
            this.currentPhase.phaseName +
            that.$t('common.process.visual.existUnfinishedTaskInPhase') +
            aTaskName.join(","),
        });
        return iFlag;
      }
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          iFlag = true;
        } else {
          console.log("info error submit!");
          that.$message({
            type: "error",
            message: this.currentPhase.phaseName + that.$t('common.process.visual.existUnfinishedInfoInPhase'),
          });
          iFlag = false;
        }
      });
      return iFlag;
    },
    handleComplete(row, e) {
      e.stopPropagation();
      let iFlag = 0;
      let aTaskName = [];
      let aReuiredAndUnchecked = this.phaseTaskList.filter((row) => {
        if (row.required == 1 && row.checked != 1) {
          aTaskName.push(row.taskName);
          return row;
        }
      });
      if (aReuiredAndUnchecked.length > 0) {
        iFlag = 1;
        this.$message({
          type: "error",
          message:
            this.currentPhase.phaseName +
            this.$t('common.process.visual.existUnfinishedTaskInPhase') +
            aTaskName.join(","),
        });
        return false;
      }
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          let oReq = {
            vfId: this.currentPhase.vfId,
            phaseId: this.currentPhase.phaseId,
          };
          this.processListLoading = true;
          //进行中的最后一个节点
          let aProcessing = this.processList.filter((raw) => {
            return raw.phaseType == 1;
          });
          let oLastProcessing = aProcessing.pop();
          let iFlagLast = 0;
          if (oLastProcessing && row.phaseId == oLastProcessing.phaseId) {
            iFlagLast = 1;
          }
          //end
          getNextProcessPhase(oReq)
            .then((res) => {
              this.currentPhaseNext = res.data.data || [];
              if (iFlagLast == 1) {
                this.endPhaseNodes = this.currentPhaseNext.filter((elem) => {
                  return elem.phaseType > 1;
                });
                this.endNodeFormOpts.column[0].dicData = this.endPhaseNodes;
              }
            })
            .then(() => {
              if (iFlagLast == 1) {
                this.dialogVisibleEnd = true;
                this.processListLoading = false;
              } else {
                let oParams = {
                  tableName: this.tableName,
                  vfId: this.currentPhase.vfId,
                  objectId: this.objectId,
                  startPhaseId: row.phaseId,
                  endPhaseId: this.currentPhaseNext[0].phaseId,
                };
                saveProcessPhaseState(this.currentModule.routePrefix, oParams).then((res) => {
                  this.$message({
                    type: res.data.meta.success ? "success" : "error",
                    message: res.data.meta.message,
                  });
                  if (res.data.meta.success) {
                    this.getProcessForBusiness();
                  }
                  this.processListLoading = false;
                });
              }
            });
        } else {
          console.log("info error submit!");
          this.$message({
            type: "error",
            message: this.currentPhase.phaseName + that.$t('common.process.visual.existUnfinishedInfoInPhase'),
          });
        }
      });
    },
    handleToggleTask() {
      if (this.taskIcon == "el-icon-arrow-up") {
        this.$refs.arrowTask.style.display = "none";
        this.taskIcon = "el-icon-arrow-down";
      } else {
        this.$refs.arrowTask.style.display = "block";
        this.taskIcon = "el-icon-arrow-up";
      }
    },
    handleToggleInfo() {
      if (this.infoIcon == "el-icon-arrow-up") {
        this.$refs.arrowInfo.style.display = "none";
        this.infoIcon = "el-icon-arrow-down";
      } else {
        this.$refs.arrowInfo.style.display = "block";
        this.infoIcon = "el-icon-arrow-up";
      }
    },
    getProcessPhaseTask() {
      this.processListLoading = true;
      let oReq = {
        tableName: this.tableName,
        objectId: this.objectId,
        phaseId: this.currentPhase.phaseId,
        vfId: this.currentPhase.vfId,
      };
      getProcessPhaseTask(oReq).then((res) => {
        this.phaseTaskList = res.data.data || [];
        // let aReuired = this.phaseTaskList.filter((item) => item.required == 1);
        this.totalTask = this.phaseTaskList.length;
        if (this.totalTask == 0) {
          this.$refs.arrowTaskBox.style.display = "none";
          this.$refs.arrowTask.style.display = "none";
          this.taskIcon = "el-icon-arrow-down";
        } else {
          this.$refs.arrowTaskBox.style.display = "block";
          this.$refs.arrowTask.style.display = "block";
          this.taskIcon = "el-icon-arrow-up";
        }
        this.findCheckedTask();
        this.processListLoading = false;
      });
    },
    handleTaskChange(val, item) {
      this.processListLoading = true;
      let oReq = {
        tableName: this.tableName,
        objectId: this.objectId,
        phaseId: item.phaseId,
        vfId: item.vfId,
        taskId: item.taskId,
      };
      if (val == 1) {
        enableProcessPhaseTask(oReq).then((res) => {
          if (res.data.meta.success) {
            this.$emit('fnAfterUpdateInfo');
            this.getProcessPhaseTask();
            this.refreshTaskAndPhaseInfo();
          } else {
            console.log("update task failure.");
          }
          this.processListLoading = false;
        });
      } else {
        disableProcessPhaseTask(oReq).then((res) => {
          if (res.data.meta.success) {
            this.$emit('fnAfterUpdateInfo');
            this.getProcessPhaseTask();
            this.refreshTaskAndPhaseInfo();
          } else {
            console.log("update task failure.");
          }
          this.processListLoading = false;
        });
      }
    },
    findCheckedTask() {
      let aChecked = this.phaseTaskList.filter((row) => {
        if (row.checked == 1) {
          return row;
        }
      });
      this.doneTask = aChecked.length;
    },
    getProcessPhaseInfo() {
      this.processListLoading = true;
      let oReq = {
        tableName: this.tableName,
        objectId: this.objectId,
        phaseId: this.currentPhase.phaseId,
        vfId: this.currentPhase.vfId,
      };
      getProcessPhaseInfo(oReq).then((res) => {
        this.infoForm.info = res.data.data || [];
        this.$refs.infoForm.clearValidate();
        let iInfoLength = this.infoForm.info.length;
        if (iInfoLength == 0) {
           this.$refs.arrowInfoBox.style.display = "none";
           this.$refs.arrowInfo.style.display = "none";
           this.infoIcon = "el-icon-arrow-down";
        } else {
          this.$refs.arrowInfoBox.style.display = "block";
          this.$refs.arrowInfo.style.display = "block";
          this.infoIcon = "el-icon-arrow-up";
        }
        this.processListLoading = false;
      });
    },
    handleChangeInfo(item) {
      let oReq = {
        tableName: this.tableName,
        objectId: this.objectId,
        vfId: this.currentPhase.vfId,
        phaseId: this.currentPhase.phaseId,
        fieldId: item.fieldId,
        fieldValue: item.fieldValue,
        apiName: item.apiName
      };

          this.processListLoading = true;
          saveProcessPhaseInfo(oReq).then((res) => {
            if (res.data.meta.success) {
              this.$emit('fnAfterUpdateInfo');
              this.getProcessPhaseInfo();
              this.refreshTaskAndPhaseInfo();
            } else {
              console.log("update info failure.");
            }
            this.processListLoading = false;
          });
  
    },
    getNextProcessPhase() {
      let oReq = {
        vfId: this.currentPhase.vfId,
        phaseId: this.currentPhase.phaseId,
      };
      getNextProcessPhase(oReq).then((res) => {
        this.currentPhaseNext = res.data.data || [];
      });
    },
    handlePhaseSaveEnd() {
      this.processListLoading = true;
      let oParams = {
        tableName: this.tableName,
        vfId: this.currentPhase.vfId,
        objectId: this.objectId,
        startPhaseId: this.currentPhaseOrigin.phaseId,
        endPhaseId: this.endNodeForm.endPhaseId,
      };
      saveProcessPhaseState(this.currentModule.routePrefix, oParams).then((res) => {
        this.$message({
          type: res.data.meta.success ? "success" : "error",
          message: res.data.meta.message,
        });
        if (res.data.meta.success) {
          this.dialogVisibleEnd = false;
          this.getProcessForBusiness();
        }
        this.processListLoading = false;
      });
    },
    refreshTaskAndPhaseInfo() {
      let oReq = {
        tableName: this.tableName,
        objectId: this.objectId,
        phaseId: this.currentPhaseOrigin.phaseId,
        vfId: this.currentPhaseOrigin.vfId,
      };
      getProcessPhaseTask(oReq).then((res) => {
        this.phaseTaskListOrigin = res.data.data || [];
      });
      getProcessPhaseInfo(oReq).then((res) => {
        this.phaseInfoOrigin = {
          info: res.data.data || [],
        };
      });
    },
    handleTogglePanel() {
      if (this.panelIcon == "el-icon-arrow-up") {
        this.$refs.arrowPage.style.height = "40px";
        this.panelIcon = "el-icon-arrow-down";
      } else {
        this.$refs.arrowPage.style.height = "auto";
        this.panelIcon = "el-icon-arrow-up";
      }
    },
    expandPanel(flag = true){
      if(flag){
        this.$refs.arrowPage.style.height = "auto";
        this.panelIcon = "el-icon-arrow-up";
      } else {
        this.$refs.arrowPage.style.height = "40px";
        this.panelIcon = "el-icon-arrow-down";
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.arrow-page {
  width: calc(100% - 40px);
  padding: 10px 20px;
  overflow: hidden;
  position: relative;
  transition: all 2s ease-in-out;
  .arrow-panel {
    position: absolute;
    left: 10px;
    top: 14px;
    .arrow-panel-btn {
      font-size: 14px;
      color: #1fc695;
    }
  }
  .arrow-container {
    margin-left: 45px;
  }
}
.arrow-box {
  display: flex;
  flex-direction: row;
  background: white;
  flex-wrap: wrap;
}
.arrow-item {
  box-sizing: border-box;
  width: 120px;
  height: 40px;
  position: relative;
  background: white;
  margin-right: 30px;
  margin-bottom: 20px;
  .arrow-item-title {
    font-size: 14px;
    line-height: 40px;
    padding: 0 20px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .arrow-complete {
    position: absolute;
    right: -10px;
    top: 3px;
    visibility: hidden;
  }

  .arrow-change,
  .arrow-forward {
    position: absolute;
    right: -10px;
    top: 3px;
    // visibility: hidden;
    display: none;
  }
  &.select.current .arrow-complete {
    button {
      color: #fff;
      font-size: 14px;
    }
    visibility: visible;
  }
  &.actived.select.canForward .arrow-forward {
    button {
      color: #fff;
      font-size: 14px;
    }
    // visibility: visible;
    display: inline;
  }
  &.none.select.canForward .arrow-forward {
    button {
      color: #00aa7f;
      font-size: 14px;
    }
    // visibility: visible;
    display: inline;
  }
  
  &.done.select.canForward .arrow-forward {
    button {
      color: #00aa7f;
      font-size: 14px;
    }
    display: inline;
  }
  &.done.select.canChangeEnd .arrow-change {
    button {
      color: #00aa7f;
      font-size: 14px;
    }
    display: inline;
  }
  &.none {
    opacity: 0.8;
    filter: drop-shadow(1px 1px 2px #666);
  }

  &.none:hover {
    opacity: 0.8;
    filter: drop-shadow(1px 1px 2px #333);
  }

  &.actived {
    color: #82dfc4;
    background: #1fc695;
  }

  &.current {
    color: #fff;
    background: #00aa7f;
  }

  &.done {
    color: #8fa1b2;
    background: #f0f0f0;
  }
  &.done {
    color: #8fa1b2;
    background: #f0f0f0;
  }
  &:not(:first-of-type):after {
    content: "";
    position: absolute;
    width: 0;
    left: -20px;
    top: 0;
    border-top: 20px solid white;
    border-bottom: 20px solid white;
    border-left: 20px solid transparent;
  }
  &:first-of-type:after {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    background-color: inherit;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  &:not(:last-of-type):before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  &:last-of-type:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 20px;
    height: 40px;
    background-color: inherit;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  &.actived:after {
    border-top: 20px solid #1fc695;
    border-bottom: 20px solid #1fc695;
    border-left: 20px solid transparent;
  }

  &.actived:before {
    border-left: 20px solid #1fc695;
  }

  &.actived:hover {
    filter: drop-shadow(1px 1px 2px #00aa7f);
  }

  &.current:after {
    border-top: 20px solid #00aa7f;
    border-bottom: 20px solid #00aa7f;
    border-left: 20px solid transparent;
  }

  &.current:before {
    border-left: 20px solid #00aa7f;
  }

  &.current:hover {
    color: #fff;
    filter: drop-shadow(1px 1px 2px #00aa7f);
  }
  &.select {
    filter: drop-shadow(1px 1px 2px #02916d);
  }
  &.select:hover {
    filter: drop-shadow(1px 1px 2px #02916d);
  }
  &.done:after {
    border-top: 20px solid #f0f0f0;
    border-bottom: 20px solid #f0f0f0;
    border-left: 20px solid transparent;
  }

  &.done:before {
    border-left: 20px solid #f0f0f0;
  }
}
.arrow-form {
  padding: 10px 20px;
  .arrow-task {
    .arrow-task-content {
      height: auto;
      margin-left: 20px;
      margin-right: 20px;
      padding: 10px;
      border: 1px solid #dae6f2;
      transition: all 2s ease-in-out;
    }
  }
  .arrow-info {
    .arrow-info-content {
      padding: 0 20px;
      transition: all 2s ease-in-out;
    }
  }
}
</style>